<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/resert.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/fangdj.css">

    <link rel="stylesheet" href="../css/footer.css">
</head>

<body>
    <!-- 详情页内容 -->
    <header class="container">
    </header>
    <main class="container">
    </main>
    <footer class="container clearfix">
        <!-- 尾部左边 -->
    </footer>

    <script src="../libs/jquery.min.js"></script>
    <script>
        $('header').load('./header.html')
        $('main').load('./fangdj.html', () => {

            let smallBox = document.querySelector('.smallBox')
            // console.log(smallBox); //左边小盒子
            let span = document.querySelector('.zhezhao') //过滤层盒子
            let bigBox = document.querySelector('.bigBox') //右边大盒子
            let rimg = document.querySelector('.rimg') //右边大盒子图片
            let ht = document.querySelector('.ht') //右边大盒子
            $.get('../data/goods.json', 'json').then(function (res) {
               
                res = res.slice(0, 40)
                let user = location.search.slice(4)-1
                console.log(res)
                let price=document.querySelector('.price')
                let num=document.querySelector('.goods_number')
                let title=document.querySelector('.title')
                let xiangqing=document.querySelector('.xiangqing')
               price.innerHTML= '￥'+res[`${user}`].price
               num.innerHTML= res[`${user}`].goods_number
               title.innerHTML= res[`${user}`].title
               xiangqing.innerHTML=res[`${user}`].goods_introduce


               
                
                smallBox.firstElementChild.src = res[`${user}`].img_small_logo
                ht.firstElementChild.firstElementChild.src = res[`${user}`].img_small_logo
                bigBox.firstElementChild.src = res[`${user}`].img_small_logo
                ht.firstElementChild.nextElementSibling.firstElementChild.src = '../img/dl.webp'
                ht.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.src =
                    '../img/zc.webp'
            })



            smallBox.onmouseover = function () { //绑定鼠标移入事件，移入的时候遮罩，大盒子显示

                span.style.display = 'block'
                bigBox.style.display = 'block'
                smallBox.onmousemove = function (e) { //左边盒子绑定鼠标移动事件
                    e = e || window.event
                    let x = e.offsetX - span.offsetWidth / 2 //减去遮罩宽高的一半，让鼠标在遮罩中间
                    let y = e.offsetY - span.offsetHeight / 2
                    x < 0 ? x = 0 : x //边界判定
                    x > 400 - span.offsetWidth ? x = 400 - span.offsetWidth : x
                    y < 0 ? y = 0 : y
                    y > 400 - span.offsetHeight ? y = 400 - span.offsetHeight : y
                    span.style.top = y + 'px'
                    span.style.left = x + 'px'
                    let w = x / (400 - span.offsetWidth) //定义变量，计算移动距离x和总的可移动距离的比值
                    let h = y / (400 - span.offsetHeight)
                    //赋值给照片定位值，比例乘以可移动最大距离就是图片移动距离
                    rimg.style.top = -h * (rimg.offsetHeight - bigBox.offsetHeight) + 'px'
                    rimg.style.left = -w * (rimg.offsetWidth - bigBox.offsetWidth) + 'px'
                }

            }

            smallBox.onmouseout = function () {
                span.style.display = 'none'
                bigBox.style.display = 'none'


            }
            ht.addEventListener('click', function (e) {
                e = e || window.event
                let target = e.target || e.srcElement
                rimg.src = target.src
                smallBox.firstElementChild.src = target.src
                let hes = document.querySelectorAll('.he')
                for (let i = 0; i < hes.length; i++) {
                    hes[i].style.border = '1px solid transparent'
                }
                target.parentElement.style.border = '1px solid red'




            })




        })

        $('footer').load('./footer.html')
    </script>

    <!-- <script src="../js/fangdj.js"></script> -->


</body>

</html>